<template>
  <div class="register-container">
    <h1>注册</h1>
    <form @submit.prevent="handleRegister">
      <div class="input-group">
        <input type="text" placeholder="昵称（中文、字母、数字、下划线，2-10字符）" v-model="user_name" required />
        <p v-if="nameError" class="error-message">{{ nameError }}</p>
      </div>
      
      <div class="input-group">
        <input type="text" placeholder="账号（字母、数字、下划线，4-20字符）" v-model="user_account" required />
        <p v-if="accountError" class="error-message">{{ accountError }}</p>
      </div>
      
      <div class="input-group">
        <input type="password" placeholder="密码（字母、数字、下划线，6-20字符）" v-model="user_pwd" required />
        <p v-if="pwdError" class="error-message">{{ pwdError }}</p>
      </div>
      
      <div class="button-group">
        <button type="submit">注册</button>
        <button type="button" @click="goToLogin">取消</button>
      </div>
    </form>
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
  </div>
</template>

<script>
import { addUser } from '@/api/user';
import axios from 'axios'; // 修正导入方式

export default {
  data() {
    return {
      user_name: '',
      user_account: '',
      user_pwd: '',
      nameError: '',
      accountError: '',
      pwdError: '',
      errorMessage: '', // 添加 errorMessage 属性
      successMessage: '' // 添加 successMessage 属性
    };
  },
  methods: {
    validateInput() {
      // 验证昵称
      const nameRegex = /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,10}$/;
      if (!nameRegex.test(this.user_name)) {
        this.nameError = '昵称格式错误';
      } else {
        this.nameError = '';
      }
      
      // 验证账号
      const accountRegex = /^[a-zA-Z0-9_]{4,20}$/;
      if (!accountRegex.test(this.user_account)) {
        this.accountError = '账号格式错误';
      } else {
        this.accountError = '';
      }
      
      // 验证密码
      const pwdRegex = /^[a-zA-Z0-9_]{6,20}$/;
      if (!pwdRegex.test(this.user_pwd)) {
        this.pwdError = '密码格式错误';
      } else {
        this.pwdError = '';
      }
      
      // 返回验证是否通过
      return this.nameError === '' && this.accountError === '' && this.pwdError === '';
    },
    async handleRegister() {
      if (!this.validateInput()) {
        return;
      }
      
      try {
        // const response = await axios.put('http://10.25.160.244:5000/user/addUser', {
        //   user_account: this.user_account,
        //   user_name: this.user_name,
        //   user_pwd: this.user_pwd
        // });
        const response = await addUser(this.user_account,this.user_name,this.user_pwd)
        const data = response.data;
        if (response.status === 200) {
          this.successMessage = '注册成功';
          this.errorMessage = '';
          alert('注册成功，请登录');
          this.$router.push('/login');
        } else {
          this.errorMessage = data.message || '注册失败';
          this.successMessage = '';
        }
      } catch (error) {
        console.error('注册失败:', error);
        this.errorMessage = '服务器错误，请稍后再试';
        this.successMessage = '';
      }
    },
    goToLogin() {
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.register-container {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.button-group {
  display: flex;
  gap: 50px;
  justify-content: center;
  margin-top: 10px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"] {
  background-color: #ccc;
  color: white;
}

button[type="button"] {
  background-color: white;
  border: 1px solid #ccc;
}

.error-message {
  color: red;
  font-size: 12px;
  margin: 0;
  white-space: nowrap;
}

.success-message {
  color: green;
  font-size: 12px;
  margin: 0;
  white-space: nowrap;
}
</style>